<template>
	<div id="js-content" class="home" v-loading="loading" element-loading-text="无忧账号加载中..." style="min-height: 100%;" v-if="!error">
		<div class="m-bg-img">
			<img src="https://5u258.oss-cn-shanghai.aliyuncs.com/other_pic/index_show.png"/>
		</div>
		<div class="wrap">
			<!--------------------------------------菜单、轮播图、公告------------------------------------->
			<div class="top-layout">
				<!-- 菜单块-->
				<div class="top-layout-left">
					<!-- 游戏菜单展示 -->
					<el-row class="tac">
						<el-col :span="24">
							<h5 class="menu-title" @click="linkToAllGame()">全部游戏分类</h5>
							<div>
								<div class="menu-item" v-for="(item,i) in menuList" :key="i">
									{{ item.groupName }}
									<span slot="title" class="el-icon-document-more">›</span>
									<!-- 游戏分类详细展示-->
									<div class="menu-info" v-show="showMenuInfo">
										<div class="menu-info-title">
											{{ item.groupName }}
											<span class="show-more" @click="showMore(item,i)">查看更多 »</span>
										</div>
										<div class="menu-info-content">
											<el-row :gutter="20">
												<el-col :span="6" v-for="(obj,j) in item.groupData" :key="j">
													<div class="grid-content bg-purple" @click="linkToGame(obj)">
														<a :title="obj.name">{{obj.name}}</a>
													</div>
												</el-col>
											</el-row>
										</div>
									</div>
								</div>
								<div class="menu-item" title="点击查看全部游戏" @click="linkToAllGame()">
									<span slot="title" class="el-icon-document-more">›</span>
									全部游戏
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
				<!-- 主要信息展示区域 -->
				<div class="top-layout-center">
					<div class="search-box">
						<search></search>
					</div>
					<!-- 轮播广告块-->
					<div class="banner">
						<div class="btn prev" @click="prev">&lt;</div>
						<div class="btn next" @click="next">&gt;</div>
						<div class="bg" ref="bg">
							<transition name="fade">
								<div v-for="(item, i) in banner" v-if="i===mark" :key="i" style="position:absolute" @click="linkToBanner(item)" @mouseover="stopTimer" @mouseout="startTimer">
									<img v-if="item.pic" class="img1" :src="item.pic" />
								</div>
							</transition>
						</div>
						<div class="page">
							<ul class="dots">
								<li class="dot-active" v-for="(item, i) in banner" :class="{ 'dot':i!=mark }" :key="i" @click="change(i)"></li>
							</ul>
						</div>
					</div>

				</div>
				<!-- 登录信息及公告块 -->
				<div class="top-layout-right">
					<div class="m-login-prompt">
						<div class="login-prompt-box" v-if="isLogin">
							<div class="user-welcome">HI：{{userName.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2")}}
								<br /><br />
								<button class="login-out" @click="loginOut()">退出登录</button>
							</div>
						</div>
						<div class="login-prompt-box" v-if="!isLogin">
							<div class="user-welcome">Hi~欢迎来到无忧游戏</div>
							<div class="user-btn">
								<a class="button-link link-login" @click="doLogin()">登录</a>
								<a class="button-link link-join" @click="doRegister()">注册</a>
							</div>
						</div>
					</div>
					<div class="m-notice">
						<div class="notice-title">无忧公告</div>
						<div class="notice-content">
							<notice-player></notice-player>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!------------------------------------商品内容-------------------------------------------->
		<!--人气主播 -->
		<!--<div class="m-theme-title-box">-->
			<!--<span class="m-theme-title">-->
				<!--<img src="../../../static/images/ico/network-anchor.png"/>-->
				<!--人气主播-->
			<!--</span>-->
			<!--&lt;!&ndash;<span class="m-theme-more" @click="linkToAllAnchor()">查看更多»</span>&ndash;&gt;-->
		<!--</div>-->
		<!--<div class="layouy-center m-type-a nav-left-item" v-if="isShowNetworkAnchorList" id="navNetworkAnchor">-->
			<!--<div class="m-type-content">-->
				<!--<el-row>-->
					<!--<el-col :span="6" v-for="(iitem,i) in home.networkAnchorList" :key="i">-->
						<!--<div class="m-anchor-item" @click="linkToAnchorInfo(iitem)">-->
							<!--<div class="item-img-box">-->
								<!--<img :src="iitem.icon"/>-->
							<!--</div>-->
							<!--<div class="item-title">-->
								<!--{{iitem.nickName}}-->
							<!--</div>-->
							<!--<div class="m-shade">-->
								<!--<span class="m-shade-btn">-->
									<!--<img src="../../../static/images/ico/icon-play_e4e7e68.png"/>-->
								<!--</span>-->
								<!--<span class="m-shade-title">点击进入直播间</span>-->
							<!--</div>-->
						<!--</div>-->
					<!--</el-col>-->
				<!--</el-row>-->
			<!--</div>-->
		<!--</div>-->

		<!--新品上架-->
		<div class="m-theme-title-box">
			<span class="m-theme-title">
				<img src="../../../static/images/ico/newproduct.png"/>
				新品上架
			</span>
			<span class="m-theme-more" @click="newproductMore()">查看更多»</span>
		</div>
		<div class="layouy-center m-type-b nav-left-item" v-if="isShowNewProductList" id="navNewProduct">
			<div class="m-type-b-left">
				<img class="m-theme-img" src="../../../static/images/bg/nav-new-product.jpg"/>
			</div>
			<div class="m-type-content">
				<el-row>
					<el-col :span="6" v-for="(iitem,j) in home.newProductList" :key="j">
						<mall-goods :msg="iitem"></mall-goods>
					</el-col>
				</el-row>
			</div>
		</div>
		<!-- 人气推荐-->
		<div class="m-theme-title-box">
			<span class="m-theme-title">
				<img src="../../../static/images/ico/hot-product.png"/>
				人气推荐
			</span>
			<span class="m-theme-more" @click="navHotProductMore()">查看更多»</span>
		</div>
		<div class="layouy-center m-type-b nav-left-item" v-if="isShowHotProductList" id="navHotProduct">
			<div class="m-type-b-left">
				<img class="m-theme-img" src="../../../static/images/bg/nav-hot-product.jpg"/>
			</div>
			<div class="m-type-content">
				<el-row>
					<el-col :span="6" v-for="(iitem,k) in home.hotProductList" :key="k">
						<mall-goods :msg="iitem"></mall-goods>
					</el-col>
				</el-row>
			</div>
		</div>

		<!------------------------------------------ 左侧导航 ---------------------------------------------------->
		<nav class="nav-container" id="js-nav" :class="isVisibleNav ? 'show':'hide'">
			<div class="nav-mark"></div>
			<div class="nav-main">
				<ul class="nav-list">
					<li :class="{'cur': curindex === index}" v-for="(item, index) in navLeftList" :key="index" :data-id="item.id">
						<a @click="navTo(item.id, index)">{{item.name}}</a>
					</li>
				</ul>
				<div class="backtop" @click="backTop()">
					<a>返回顶部</a>
				</div>
			</div>
		</nav>
		<!--------------------------------右侧悬浮----------------------------------------------------->
		<right-nav></right-nav>
		<!------------------------------------------------错误页面------------------------------------->
		<div class="no-info" v-if="error">
			<div class="no-data">
				<img src="/static/images/error.png">
				<br> 抱歉！出错了...
			</div>
		</div>
	</div>
</template>
<script>
	import { productHome, listGame,loginOut } from '/api/index.js'
	import product from '/components/product'
	import mallGoods from '/components/mallGoods'
	import search from '/components/searchBox'
	import rightNav from '/components/rightNav'
	import noticePlayer from '/components/noticePlayer'
	import { setStore, getStore ,removeStore} from '/utils/storage.js'
	import { mapMutations, mapState } from 'vuex'
	export default {
    metaInfo: {
      title: '无忧账号-账号交易首选无忧-账号找回永久包赔-所售账号不转手永久包赔', // set a title
      meta: [{                 // set meta
        name: 'keywords',
        content: '5u，5u账号，5u258，5u游戏，游戏账号交易，无忧账号，游戏帐号交易平台,5u258交易平台，5u258官网，王者荣耀，CF枪战之王，火影忍者，QQ飞车手游，和平精英，穿越火线，英雄联盟，逆战，霸气玩，租号玩，买卖账号'
      },{                 // set meta
        name: 'description',
        content: '无忧账号,是国内专业安全的游戏帐号交易平台，账号找回永久包赔，所售账号不转手永久包赔。玩家可以通过极其优惠的价格购买王者荣耀，CF枪战之王，火影忍者，QQ飞车手游，和平精英，穿越火线，英雄联盟，逆战等游戏的极品号。'
      }]
    },
		data() {
			return {
				title: '新品上市',
				error: false,
				banner: [],
				mark: 0,
				bgOpt: {
					px: 0,
					py: 0,
					w: 0,
					h: 0
				},
				home: [],
				loading: true,
				notify: '1',
				dialogVisible: false,
				timer: '',
				intervalTime: 5000,
				showMenuInfo: false,
				menuList: [],
				isLogin: false,
				userName: "",
				isShowNewProductList: false,
				isShowHotProductList: false,
				isShowNetworkAnchorList: false,
				navLeftList: [],
				curindex: 0,
				isVisibleNav: false,
				gotop: false
			}
		},
		methods: {
			...mapMutations(['CHANGE_NAV']),
			showMore(item,tabIndex) {
				this.$router.push({
					path: '/category',
					  query: {
			            tabIndex: tabIndex+""
			          }
				});
			},
			autoPlay() {
				this.mark++
					if(this.mark > this.banner.length - 1) {
						// 当遍历到最后一张图片置零
						this.mark = 0
					}
			},
			play() {
				// 每2.5s自动切换
				this.timer = setInterval(this.autoPlay, this.intervalTime)
			},
			change(i) {
				this.mark = i
			},
			prev() {
				if(this.mark < 1) {
					this.mark = this.banner.length - 1;
				} else {
					this.mark -= 1;
				}
			},
			next() {
				if(this.mark == this.banner.length - 1) {
					this.mark = 0;
				} else {
					this.mark += 1;
				}
			},
			startTimer() {
				this.timer = setInterval(this.autoPlay, this.intervalTime)
			},
			stopTimer() {
				clearInterval(this.timer)
			},
			linkToBanner(item){			//轮播链接
				var attrs = Object.keys(item);
				if(attrs.length > 0){
					if(item.url){
						window.open(item.url);
					}
				}
			},
			loginOut() {
		        this.$confirm('是否退出登录?', '退出提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
					loginOut().then(res => {
						if(res.success === false) {
							this.$message('程序异常退出失败！');
							this.error = true
							return;
						}
						removeStore("userInfo");
						this.$router.push({
							path: '/home'
						});
						location.reload();
					}).catch((e) => {
						console.log(e)
					});
		          this.$message({
		            type: 'success',
		            message: '已退出!'
		          });
		        }).catch(() => {
		          this.$message({
		            type: 'info',
		            message: '取消退出'
		          });
		        });
			},
			linkToAllGame(){			//全部游戏
				var tabIndex = this.menuList.length;
				this.$router.push({
					path: '/category',
					  query: {
			            tabIndex: tabIndex+""
			          }
				});
			},
			linkToGame(item){			//指定游戏
				this.$router.push({
		          name: 'game',
		          params: {
		            paramObj: item
		          }
		        })
			},
			linkToAllAnchor(){
//				alert("更多主播");
			},
			showNotify() {
				var value = getStore('notify')
				if(this.notify !== value) {
					this.dialogVisible = true
					setStore('notify', this.notify)
				}
			},
			doLogin() {
				this.$router.push({
					path: '/login'
				});
			},
			doRegister() {
				this.$router.push({
					path: '/register'
				});
			},
			hideNewProductList(data) {
				if(data) {
					if(data.length > 0) {
						this.isShowNewProductList = true;
					}
				}
			},
			hideHotProductList(data) {
				if(data) {
					if(data.length > 0) {
						this.isShowHotProductList = true;
					}
				}
			},
			hideNetworkAnchorList(data) {
				if(data) {
					if(data.length > 0) {
						this.isShowNetworkAnchorList = true;
					}
				}
			},
			addNavLeftData() {
				var navLeftList = [];
				if(this.isShowNetworkAnchorList) {
					navLeftList.push({
						id: "navNetworkAnchor",
						name: "人气主播"
					});
				}
				if(this.isShowNewProductList) {
					navLeftList.push({
						id: "navNewProduct",
						name: "新品上架"
					});
				}
				if(this.isShowHotProductList) {
					navLeftList.push({
						id: "navHotProduct",
						name: "人气推荐"
					});
				}
				this.navLeftList = navLeftList;
			},
			initScroll(e) {
				let _this = this;
				// 监听页面滚动事件
					var removeClass = function(obj, cls) {
						if(obj.className == cls) {
							obj.className = "";
						}
					}
					var addClass = function(obj, cls) {
						if(obj.className != cls) {
							obj.className = cls;
						}
					}

					let pos = document.documentElement.scrollTop;
					if(pos > 400) {
						_this.isVisibleNav = true;
					} else {
						_this.isVisibleNav = false;
					}
					// 获取全部导航dom与元素dom
					var navLeftList = document.querySelector("#js-nav").querySelectorAll("li");
					var items = document.querySelector("#js-content").querySelectorAll(".nav-left-item");
					// 滚动后遍历元素，如果页面滚动位置大于元素的位置，赋值给变量
					var currentId = "";
					for(var i = 0; i < items.length; i++) {
						var _item = items[i];
						var _itemTop = _item.offsetTop;
						if(pos > _itemTop - 200) {
							currentId = _item.id;
						} else {
							break;
						}
					}
					// 如果已赋值了变量，进行匹配，如果匹配则添加class其他删除
					if(currentId) {
						for(var j = 0; j < navLeftList.length; j++) {
							var _navItem = navLeftList[j];
							var _navId = _navItem.getAttribute('data-id');
							if(_navId != currentId) {
								removeClass(_navItem, "cur");
							} else {
								addClass(_navItem, "cur");
							}
						}
					}
				let scrolltop = e.target.scrollTop;
				scrolltop > 30 ? (this.gotop = true) : (this.gotop = false);
			},
			navTo(id) { //导航到指定位置
				var items = document.querySelector("#js-content").querySelectorAll(".nav-left-item");
				for(var i = 0; i < items.length; i++) {
					var _item = items[i];
					if(_item.id == id) {
						var _itemTop = _item.offsetTop;
						document.body.scrollTop = document.documentElement.scrollTop = _itemTop;
					}
				}
			},
			backTop() { //返回顶部
				let top = document.documentElement.scrollTop || document.body.scrollTop;
				// 实现滚动效果 ，平滑过渡
				const timeTop = setInterval(() => {
					document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
					if(top <= 0) {
						clearInterval(timeTop);
					}
				}, 10);
			},
			linkToAnchorInfo(item) {
				if(item){
					item.url ? window.open(item.url) : "";
				}
			},
			newproductMore(){
				//新品上架展示页面跳转
				this.$router.push({
		          name: 'game',
		          params: {
		            newproductMore: true
		          }
		        })
			},
			navHotProductMore(){
				//人气推荐展示页面跳转
				this.$router.push({
		          name: 'game',
		          params: {
		            navHotProductMore: true
		          }
		        })
			}
		},
		mounted() {
			productHome().then(res => {
				if(res.success === false) {
					this.error = true
					return;
				}
				let data = res.data;
				this.home = data;
				this.loading = false;
				this.banner = data.advertiseList;
				this.hideNewProductList(data.newProductList);
				this.hideHotProductList(data.hotProductList);
				this.hideNetworkAnchorList(data.networkAnchorList);
				this.addNavLeftData();
			}).catch((e) => {
		      	 console.log(e)
			});
			this.showNotify();
			//获取游戏分类
			listGame().then(res => {
				if(res.success === false) {
					this.error = true
					return;
				}
				let data = res.data;
				if(data) {
					for(var i = 0; i < data.length; i++) {
						if("string" == typeof(data[i]["groupData"])) {
							data[i]["groupData"] = JSON.parse(data[i]["groupData"]);
						}
					}
				}
				this.menuList = data;
			}).catch((e) => {
		      	 console.log(e)
		 	 });
			//验证登录
			var userInfo = getStore('userInfo');
			if(!userInfo) {

			} else {
				this.isLogin = true;
				this.userName = JSON.parse(userInfo).username;
			}
			this.CHANGE_NAV(0);
			//初始化页面滚轮
			window.addEventListener("scroll", this.initScroll);
		},
		computed: {
			...mapState(['navIndex'])
		},
		created() {
			this.play();		//轮播
		},
		destroyed() {
			window.removeEventListener('scroll', this.initScroll)
		},
		components: {
			product,
			mallGoods,
			search,
			noticePlayer,
			rightNav
		}
	}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
	.home {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
	}

	.wrap {
		height: auto;
		width: 1200px;
		margin-right: auto;
		margin-left: auto;
		margin-top: 230px;
	}
	.layouy-center{
		width: 1200px;
		margin-right: auto;
		margin-left: auto;
	}
	.top-layout {
		width: 100%;
		height: 500px;
		padding-left: 230px;
		padding-right: 230px;
	}
	.m-theme-title-box{
		width: 1200px;
		height: 60px;
		margin-right: auto;
		margin-left: auto;
		margin-top: 25px;
	}
	.m-theme-title{
		font-size: 18px;
		font-weight: bold;
	}
	.m-theme-title img{
		width: 30px;
		height: 30px;
		margin: 5px;
		vertical-align: middle;
	}
	.m-theme-more{
		position: relative;
	    float: right;
	    width: 100px;
	    height: 100%;
	    font-size: 12px;
        text-align: center;
        padding: 20px;
	}
	.m-theme-more:hover{
		cursor: pointer;
	}
	.m-advert{
		width: 1200px;
		height: 90px;
		margin: 25px auto;
	}
	.m-advert img{
		width: 100%;
		height: 100%;
	}

	.top-layout-left {
		float: left;
		width: 230px;
		height: 100%;
		margin-left: -230px;
		box-shadow: 0px 0px 10px 2px rgba(214, 213, 213, 0.9);
	}

	.top-layout-center {
		position: relative;
		display: inline-block;
		float: left;
		width: 100%;
		height: 100%;
	}

	.top-layout-right {
		position: relative;
		display: inline-block;
		float: left;
		width: 230px;
		margin-right: -230px;
		height: 500px;
		background-color: white;
		border-top-left-radius: 9px;
		border-top-right-radius: 9px;
		box-shadow: 0px 0px 10px 2px rgba(214, 213, 213, 0.9);
	}
	.m-type-a {
		position: relative;
		height: 200px;
		display: flex;
		flex-direction: row;
	}

	.m-type-a-left {
		position: relative;
		width: 230px;
		margin-right: 10px;
   		box-shadow: 0px 0px 10px 2px rgba(214, 213, 213, 0.9);
	}

	.m-type-content {
		position: relative;
		width: 100%;
		overflow: hidden;
		background-color: white;
		box-shadow: 0px 0px 10px 2px rgba(214, 213, 213, 0.9);
		margin-bottom: 5px;
	}
	.m-type-content:hover {
		cursor: pointer;
		top: 0;
	}

	.m-type-b {
		position: relative;
		min-height: 260px;
		max-height: 560px;
		display: flex;
		flex-direction: row;
	}

	.m-type-b-left {
		position: relative;
		width: 230px;
		margin-right: 10px;
		margin-bottom: 5px;
   		box-shadow: 0px 0px 10px 2px rgba(214, 213, 213, 0.9);
	}

	.m-anchor-item {
		position: relative;
		background-color: white;
		margin: 0 5px 0 5px;
		height: 100%;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		overflow: hidden;
	}
	.login-out{
		margin: 0 auto;
		width: 80px;
		height: 30px;
		border-radius: 15px;
		background-color: #FE8F12;
		color: white;
		font-weight: bold;
		cursor: pointer;
	}
	.login-out:hover{
		background-color: #e47d08;
	}
	.m-anchor-item:hover .m-shade{
		cursor: pointer;
		top: 0;
	}

	.item-img-box {
		height: 160px;
		overflow: hidden;
	}

	.item-img-box img {
		width: 100%;
		height: 160px;
		cursor: pointer;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}
	.item-title {
		height: 35px;
		padding: 10px 20px 10px 20px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        background-color: white;
        text-align: center;
	}
	.m-shade{
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    z-index: 999;
	    background-color: #000000;
	    top: 100%;
        text-align: center;
        opacity: 0.7;
        transition: 0.5s;
        -webkit-transition: 0.5s;
	}
	.m-shade-btn{
		width: 100%;
		height: 50%;
		display: block;
	}
	.m-shade-btn img{
		width: 50px;
		height: 50px;
		margin-top: 50px;
		z-index: 99999;
	}
	.m-shade-title{
		width: 100px;
		height: 50%;
	    line-height: 35px;
		color: white;
	}
	.m-login-prompt {
		width: 100%;
		height: 130px;
		border-radius: 8px;
		background: linear-gradient(#FF8700, #F7F7F7);
	}

	.login-prompt-box {
		width: 80%;
		height: 115px;
		border-radius: 8px;
		margin: 0 auto;
		background-color: white;
		position: relative;
		top: 20px;
		text-align: center;
	}

	.user-welcome {
		color: #222;
		font-size: 14px;
		padding: 35px 20px 0
	}

	.user-btn {
		position: relative;
		padding-top: 20px;
		text-align: left;
	}

	.user-btn ::after {
		content: "";
		height: 35%;
		width: 1px;
		background: #d2cfcf;
		position: absolute;
		top: 60%;
		left: 50%;
		margin-left: -.5px;
	}

	.button-link {
		display: inline-block;
		width: 50px;
		margin-left: 35px;
		color: #303030;
	}

	.button-link:hover {
		color: #FF8700;
	}

	.m-notice {
		width: 100%;
		height: 350px;
	}

	.notice-title {
		height: 40px;
		text-align: center;
		line-height: 40px;
		background: url(../../../static/images/v1-9_bg_line_tit.png) center center no-repeat;
	}

	.notice-content {
		height: 310px;
		padding: 0 20px;
	}

	.notice-content li {
		list-style: none;
		line-height: 30px;
		height: 30px;
	}

	.hotline {
		height: 50px;
		padding: 5px 20px;
	}

	.tac {
		height: 100%;
		background-color: white;
	}

	.tac .el-menu {
		background-color: white;
	}

	.menu-title {
		width: 100%;
		height: 50px;
		background-color: #FF8700;
		padding-left: 22px;
		color: white;
		font-weight: bold;
		font-size: 16px;
		line-height: 50px;
		margin-bottom: 15px;
	}
	.menu-title:hover{
		cursor: pointer;
	}

	.no-info {
		padding: 100px 0;
		text-align: center;
		font-size: 30px;
		display: flex;
		flex-direction: column;
		.no-data {
			align-self: center;
		}
	}

	.page {
		position: absolute;
		width: 100%;
		bottom: 30px;
		z-index: 30;
		.dots {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			.dot-active {
				display: inline-block;
				width: 15px;
				height: 15px;
				background-color: whitesmoke;
				border-radius: 8px;
				margin-right: 10px;
				cursor: pointer;
			}
			.dot {
				opacity: 0.2;
			}
		}
	}

	.el-icon-document-more {
		position: absolute;
		font-size: 25px;
		right: 20px;
		width: 20px;
		color: #8D8D8D;
		height: 100%;
		line-height: 56px;
	}

	.btn {
		background: rgba(43, 43, 43, .1);
		color: #fff;
		font-family: SimHei !important;
		text-align: center;
		line-height: 50px;
		font-size: 24px;
		font-weight: 700;
		width: 50px;
		height: 50px;
		position: absolute;
		top: 50%;
		margin-top: -25px;
		z-index: 2;
		cursor: pointer;
	}

	.btn:hover {
		background-color: #616060;
		opacity: 0.5;
	}

	.prev {
		border-radius: 0 25px 25px 0;
		left: 0;
		text-indent: -10px;
	}

	.next {
		border-radius: 25px 0 0 25px;
		right: 0;
		text-indent: 10px;
	}

	.search-box {
		width: 100%;
		height: 12%;
	}

	.menu-info {
		position: absolute;
		z-index: 999;
		margin-left: 200px;
		height: 440px;
		background-color: white;
		top: 12%;
		width: 700px;
		color: black;
		cursor: default;
	}

	.menu-info-title {
		width: 100%;
		height: 80px;
		padding: 20px 24px;
		font-size: 16px;
		font-weight: 700;
		color: #303030;
	}

	.menu-info-content {
		padding: 0 24px;
		font-size: 14px;
		overflow-y: auto;
	}

	.menu-info-content a {
		color: #515151;
	}

	.menu-info-content a:hover {
		color: #FF8700;
	}

	.show-more {
		float: right;
		font-size: 12px;
		color: #909090;
		font-weight: 100;
		cursor: pointer;
	}

	.show-more:hover {
		color: #222222;
	}

	.banner,
	.banner span,
	.banner div {
		font-family: "Microsoft YaHei";
		transition: all .3s;
		transition-timing-function: linear;
	}

	.banner {
		cursor: pointer;
		perspective: 3000px;
		position: relative;
		z-index: 19;
		margin-left: 10px;
		margin-right: 10px;
		height: 88%;
		background-color: white;
		border-radius: 12px;
	}

	.bg {
		position: relative;
		height: 100%;
		background-size: 100% 100%;
		border-radius: 10px;
		transform-style: preserve-3d;
		transform-origin: 50% 50%;
		transform: rotateY(0deg) rotateX(0deg);
		& div {
			position: relative;
			height: 100%;
			width: 100%;
		}
	}

	.img1 {
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		border-radius: 10px;
	}

	.img2 {
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		bottom: 5px;
		left: 0;
		background-size: 95% 100%;
		border-radius: 10px;
	}

	.img3 {
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		border-radius: 10px;
	}

	.menu-item {
		height: 50px;
		width: 100%;
		line-height: 50px;
		padding-left: 30px;
		cursor: pointer;
	}

	.menu-item:hover {
		color: #DA5504;
		background-color: #ffecd7;
	}

	.menu-item:hover .menu-info {
		display: block !important;
	}
	.mt30 {
		width: 1220px;
		margin: 30px auto;
	}


	.floors {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		.imgbanner {
			width: 50%;
			height: 430px;
			.cover-link {
				cursor: pointer;
				display: block;
				position: absolute;
				top: 60px;
				left: 0;
				width: 50%;
				height: 430px;
				z-index: 4;
				background: url() repeat;
			}
			.cover-link:hover {
				box-shadow: inset 0 0 38px rgba(0, 0, 0, .08);
				transition: all .15s ease;
			}
		}
		img {
			display: block;
			width: 100%;
			height: 100%;
		}
	}

	.m-bg-img {
		position: absolute;
		top: 0;
		left:0px;
		right:0px;
		width: 100%;
		height: 340px;
	}

	.m-bg-img img {
		 display:block;
		 width: 100% !important;
		 height: 100% !important;
	}

	.nav-container {
		position: fixed;
		width: 50px;
		height: auto;
		background-color: white;
		animation-duration: .6s;
		animation-fill-mode: both;
		top: 130px;
		left: 30px;
		box-shadow: rgba(180, 180, 180, .25) 0 0 5px 3px;
		visibility: hidden;
		opacity: 0;
		transform: translateY(100px);
		transition: .3s;
	}

	.nav-container.show {
		animation: show .5s forwards;
	}

	.nav-container.hide {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
		animation: hide .5s forwards;
	}

	@keyframes show {
		to {
			visibility: visible;
			opacity: 1;
			transform: translateY(0)
		}
	}

	@keyframes hide {
		to {
			visibility: hidden;
			opacity: 0;
			transform: translateY(100px)
		}
	}

	.nav-container a {
		color: #333;
		display: block;
		padding: 8px 6px;
	}

	.nav-container a:hover {
		color: #FF8700;
		cursor: pointer;
	}

	.nav-list {
		position: relative;
		width: 100%;
	}

	.nav ul {
		margin: 0;
		padding: 0;
	}

	.nav-list li {
		width: 100%;
		height: 50px;
		line-height: 1.3em;
		text-align: center;
	}

	.nav-list li:hover {
		background-color: #F0F0F0;
	}

	.backtop {
		display: inline-block;
		width: 100%;
		height: 50px;
		text-align: center;
	}

	.backtop:hover {
		background-color: #F0F0F0;
		color: chocolate;
	}

	.cur {
		background-color: #FE9117;
		color: white !important;
	}

	.cur a {
		color: white !important;
	}

	.cur a:hover {
		color: #FF8700 !important;
	}

	@media (max-width: 1240px) {
		body {
			min-width: 1240px;
		}
		.wrap {
			width: 1200px;
		}
		.layouy-center{
			width: 1200px;
		}
		.m-theme-title-box{
			width: 1200px;
		}
		.m-advert{
			width: 1200px;
		}
		.nav-container{
			display: none;
		}
	}
	@media (max-width: 1370px) {
		.nav-container{
			display: none;
		}
	}
	@media (max-width: 1420px) {
		.nav-container{
			right: 5px;
		}
	}

	@media (min-width: 1470px) {
		body {
			min-width: 1470px;
		}
		.wrap {
			width: 1430px;
		}
		.m-theme-title-box{
			width: 1430px;
		}
		.layouy-center{
			width: 1430px;
		}
		.menu-info {
			width: 800px;
		}
		.mt30 {
			width: 1430px;
		}
		.m-advert{
			width: 1430px;
		}
	}
	@media (max-width: 767px){
		.wrap{
			margin-top: -50px;
		}
		.m-bg-img{
			position: relative;
		}
	}
</style>
